<template>
  <div class="datadisplay">
    <div v-for="(item, index) in data" :key="index">
      <img
        :src="getImg(index)"
        alt=""
        :style="index % 2 == 0 ? 'left:18px' : 'right: 18px'"
      />
      <span class="text" :style="index % 2 == 0 ? 'left:76px' : 'right: 76px'"
        >{{ item.text }}</span
      >
      <span class="num" :style="{left:(index % 2 == 0 ? '75px' : '45px'),color: item.color}">{{ item.num }}</span>
    </div>
  </div>
</template>

<script setup>
import list1 from "../../assets/images/list1.png";
import list2 from "../../assets/images/list2.png";
import list3 from "../../assets/images/list3.png";
import list4 from "../../assets/images/list4.png";
const imgs = [list1, list2, list3, list4];
const getImg = (index) => {
  return imgs[index];
};
const data = [
  {
    text: "数据展示",
    num: 1523,
    color: "#feff84",
  },
  {
    text: "数据展示",
    num: 2233,
    color: "#ffa184",
  },
  {
    text: "数据展示",
    num: 5462,
    color: "#039ae4",
  },
  {
    text: "数据展示",
    num: 3542,
    color: "#0053fd",
  },
];
</script>

<style lang="less" scoped>
.datadisplay {
  width: 100%;
  height: 100%;
  padding-top: 58px;
  padding-left: 33px;
  div {
    width: 42%;
    height: 35%;
    border: 1px solid #039ae4;
    position: relative;
    margin-bottom: 4px;
    margin-right: 4px;
    display: inline-block;
    img {
      position: absolute;
      top: 30%;
    }
    .text {
      color: white;
      font-size: 24px;
      position: absolute;
      top: 10%;
    }
    .num {
      font-size: 36px;
      position: absolute;
      top: 45%;
    }
  }
}
</style>